<template>
  <div class="md:flex">
    <Card class="w-full !md:mt-0 !mt-3" :loading="loading" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <div class="text-5xl" style="color: gray">
          {{ cardInfo }}
        </div>
      </div>

      <div class="px-4 flex justify-between">
        <span class="text-2xl" style="color: gray">{{ titleInfo }}</span>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
import { Card } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import {
  getOnlineUsers,
  getPaidTenants,
  getSoldApps,
  getSubscribedApps,
} from '/@/api/homepage/homepage';

export default defineComponent({
  components: {
    Card,
  },
  props: {
    cardClass: String,
  },
  setup(props) {
    const cardInfo = ref();
    const iconInfo = ref();
    const titleInfo = ref();
    const colorInfo = ref();
    switch (props.cardClass) {
      case 'subscribedApps':
        getSubscribedApps().then((res) => {
          cardInfo.value = res;
        });
        colorInfo.value = '#04ef1b';
        titleInfo.value = '订阅应用数';
        iconInfo.value = 'majesticons:applications-add-line';
        break;
      case 'soldApps':
        getSoldApps().then((res) => {
          cardInfo.value = res;
        });
        colorInfo.value = '#04c2fc';
        titleInfo.value = '上架应用数';
        iconInfo.value = 'majesticons:applications-line';
        break;
      case 'paidTenants':
        getPaidTenants().then((res) => {
          cardInfo.value = res;
        });
        colorInfo.value = '#7171B7';
        titleInfo.value = '付费用户数';
        iconInfo.value = 'ri:user-star-line';
        break;
      case 'onlineUsers':
        getOnlineUsers().then((res) => {
          cardInfo.value = res;
        });
        colorInfo.value = '#8703fa';
        titleInfo.value = '在线用户数';
        iconInfo.value = 'ri:user-follow-line';
    }
    return {
      cardInfo,
      iconInfo,
      titleInfo,
      colorInfo,
    };
  },
});
</script>
